<!--  -->
<template>
  <div class="qf-find">
    <!-- 品类列表 -->
    <div class="qf-find-left">
      <h2
        v-for="item in cates"
        :key="item.id"
        v-text="item.cate"
        @touchstart="touch(item)"
        :class="{'on':curIdx==item.id}"
      ></h2>
    </div>
    <!-- 商品品类 -->
    <div class="qf-find-right">
      <van-grid :column-num="3">
        <van-grid-item v-for="value in 30" :key="value" >
            <van-image src='https://img.yzcdn.cn/vant/apple-1.jpg'/>
            
            <div>商品名城</div>
        </van-grid-item>
      </van-grid>
    </div>

    <QfTabbar></QfTabbar>
  </div>
</template> 

<script>
import { Grid, GridItem ,Image} from "vant"; 
import QfTabbar from '../../components/common/QfTabbar'
export default {
  name: "find",
  data() {
    return {
      curIdx: 1,
      cates: [
        { id: 1, cate: "手机数码" },
        { id: 2, cate: "手机数码" },
        { id: 3, cate: "手机数码" },
        { id: 4, cate: "手机数码" },
        { id: 5, cate: "手机数码" },
        { id: 6, cate: "手机数码" },
        { id: 7, cate: "手机数码" },
        { id: 8, cate: "手机数码" },
        { id: 9, cate: "手机数码" },
        { id: 10, cate: "手机数码" },
        { id: 11, cate: "手机数码" },
        { id: 12, cate: "手机数码" },
        { id: 13, cate: "手机数码" },
        { id: 14, cate: "手机数码" },
        { id: 15, cate: "手机数码" },
      ],
    };
  },
  components: {
     QfTabbar,
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Image.name]:Image,
  },
  methods: {
    touch(item) {
      this.curIdx = item.id;
      //   还要调接口
    },
  },
};
</script>
<style lang='scss' scoped>
.qf-find {
  position: relative;

  width: 100vw;
  .qf-find-left {
    position: absolute;
    top: 0;
    left: 0;
    width: 3rem;
    background: rgb(248, 248, 248);
    height: calc(100vh - 50px);
    overflow: scroll;
    h2 {
      font-size: 0.4rem;
      text-align: center;
      line-height: 1.066667rem;
    }
    h2.on {
      background: white;
      color: rgb(239, 116, 117);
    }
  }
  .qf-find-right {
    position: absolute;
    top: 0;
    left: 3rem;
    right: 0;
    height: calc(100vh - 50px);
    overflow: scroll;
    .van-grid-item{
        font-size:0.2rem;
        line-height: 0.666667rem;
        text-align: center;
        .van-image{
             width: 1.866667rem;
            height: 1.866667rem;
        img{
            display: block;
           width: 100%;
           height: 100%;
        }
    }
    }
    
  }
}
</style>